蓋板廣告太常見到了,目前幾乎人手多機的情況下,我們每天幾乎都離不開上網這行為,上網除了上班用電腦以外,幾乎都是用行動裝置上網了,也就經常會看到蓋版廣告這種網路生態中的常見數位生物(咦?生物?),在一個網路內容多數都閱覽免費的情況下,蓋版廣告可以説是網站經營中不可或缺的收入來源,所以它的重要性可見一班了,今天我們就來帶壞大家看看蓋版廣告的垂直置中方式。
蓋版廣告基本上要達到廣告區塊會蓋住整個畫面的情況,所以我們需要固定區塊的定位在視窗之中,其中較常見到的方式有兩個,一個是 absolute ,一個則是 fixed,這兩種都有人使用,但要讓你不管怎麼捲動都能蓋住版面的話,那就是要設定 fixed 才行了,有了 fixed 的區塊之後,我們就能在裡面設置我們所想要的垂直直至中畫面了,大致原理就是這樣。所以讓我們來看看蓋版廣告的範例原始碼
<div class="content">
<h2>Amos的垂直置中好也</h2>
<p>
垂直置中須於中;<br>
直豎在中皆可置;<br>
置位於中正且直;<br>
中於正中不再垂.
</p>
</div>
.content{
width: 400px;
height: 200px;
padding: 10px;
background-color: #ccc;
text-align: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
上面這種寫法的缺點就是需要讓內容有固定高度,有時候我們的內容高度不固定的話就沒辦法了,所以我們可以改用下面的寫法或許更彈性些。
<div class="wrap">
<div class="content">
<h2>Amos的垂直置中好也</h2>
<p>
垂直置中須於中;<br>
直豎在中皆可置;<br>
置位於中正且直;<br>
中於正中不再垂.
</p>
</div>
</div>
.wrap{
width: 400px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display:flex;
align-items: center;
}
.content{
width: 100%;
padding: 10px;
background-color: #ccc;
text-align: center;
}
上面這種寫法讓內容可以不用固定高度,彈性變大了,但支援度也變低了,IE10以下都不支援,但你也可以改用支援度更高的「使用CSS ::before + inline-block 屬性來達到垂直置中」,讓他最低可以支援到IE8。
這種垂直置中可以讓你有個蓋滿版面的半透明區塊,效果可以說是最常見了,這種區塊的好處是可以讓你對畫面有聚焦效果。
<div class="wrap">
<div class="content">
<h2>Amos的垂直置中好也</h2>
<p>
垂直置中須於中;<br>
直豎在中皆可置;<br>
置位於中正且直;<br>
中於正中不再垂.
</p>
</div>
</div>
.wrap{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
margin: auto;
display:flex;
justify-content:center;
align-items: center;
background-color: rgba(0,0,0,.3);
}
.content{
width: 400px;
padding: 10px;
background-color: #ccc;
text-align: center;
}
上面這邊 Amos 利用了半透明的背景色彩來處理那個黑色,而且很偷懶的使用了 flex 來做最直置中,但這種做法可能舊版的瀏覽器(像IE8)不支援這種太新的語法,所以我們也可以改用以下寫法來讓他支援度更高些(支援所有版本瀏覽器)。
.wrap{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
margin: auto;
text-align:center;
font-size: 0;
}
.wrap:before{
content:'';
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
}
.wrap:after{
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
background-color: #000;
opacity:.5
}
.content{
width: 400px;
padding: 10px;
background-color: #ccc;
text-align: center;
position: relative;
z-index: 1;
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
範例頁面
這樣就完美解決了所有問題啦。
當然有其他垂直置中寫法啦,這邊能夠應用的方式要看你專案的需求,正常來說只要是不管IE這瀏覽器的話,基本上 Amos 所寫的所有垂直置中技巧都能應用進去,但如果你需要支援到IE的話,那就請你看「IE8以上的網頁我該如何做垂直置中」這一篇文章了,裡面詳述了當你要支援到IE時的各種垂直置中做法。
了解了蓋版廣告的原理之後,基本上我們就能應用在很多算的需求上面,像是登入區塊、註冊畫面、回應區塊、 彈出式訊息、不讓你用區塊(咦?)...等等這一類的應用,基本上就是要蓋住版面就對了啦。除了這些以外當然同樣地原理只要能達到你的需求的話,也都能拿來應用上去就對了。
Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS可樂部落格
CSS coke的Youtube直播頻道
快按此訂閱CSS coke的頻道